<template>

  <d2-container>

    <template #header>
      <el-form :gutter="24" ref="search-box" :model="mainQuery" label-position="left" :inline="true" label-width="90px">

        <el-col :span="8">
          <el-form-item label="订单号：" size="mini">
            <el-input placeholder="" v-model="mainQuery.tradeNo" @keyup.enter.native="handleSearch" size="small"
                      clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="商户号：" size="mini">
            <el-input placeholder="" v-model="mainQuery.mchNo" @keyup.enter.native="handleSearch" size="small"
                      clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="终端号：" size="mini">
            <el-input placeholder="" v-model="mainQuery.terNo" @keyup.enter.native="handleSearch" size="small"
                      clearable></el-input>
          </el-form-item>
        </el-col>


        <el-col :span="8">
          <el-form-item label="申请状态：" size="mini">
            <el-select v-model="mainQuery.auditStatus" size="mini" clearable @change="handleSearch">
              <el-option
                v-for="item in refundApplyOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="勾兑状态：" size="mini">
            <el-select v-model="mainQuery.isChecked" size="mini" clearable @change="handleSearch">
              <el-option
                v-for="item in isCheckedOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-form-item label="创建时间：" size="mini">
          <el-date-picker
            size="small"
            v-model="mainQuery.createTimeRange"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="datetimePickerOptions"
            @change="handleSearch"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="search-btn-box">
        <div class="left">
        </div>
        <div class="right">
          <el-button class="filter-item" icon="" type="default" @click="resetMainData" :loading="mainTable.loading"
                     size="mini">重置
          </el-button>
          <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleSearch"
                     :loading="mainTable.loading" size="mini">查询
          </el-button>
        </div>
      </div>

    </template>

    <d2-crud
      ref="d2Crud"
      :options="mainTable.options"
      :index-row="mainTable.indexRow"
      :columns="mainTable.columns"
      :data="mainTable.list"
      :loading="mainTable.loading"
      :rowHandle="mainTable.rowHandle"
      @handle-reject="handleReject"
      @handle-create="handleCreate"
    ></d2-crud>

    <template #footer>
      <el-pagination
        @size-change="handleMainSizeChange"
        @current-change="handleMainPageChange"
        :current-page="mainTable.pagination.currentPage"
        :page-sizes="mainTable.pagination.pageSizes"
        :page-size="mainTable.pagination.pageSize"
        :page-count="mainTable.pagination.pageCount"
        :total="mainTable.pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        :background="true"
      >
      </el-pagination>
    </template>

    <dialog-reject ref="dialog-reject" @dialog-close="fetchMainData"></dialog-reject>

  </d2-container>

</template>

<script>

  import ApiMain from '@/api/trade.refundApply'
  import DatetimePickerMixin from '@/mixin/DatetimePickerMixin'
  import DialogReject from "./dialog-reject";

  import {
    isCheckedOptions,
    refundApplyOptions,
  } from "@/const/constant"

  export default {
    name: 'trade-refundApply',

    mixins: [
      DatetimePickerMixin,
    ],
    components: {
      DialogReject,
    },

    data () {
      return {

        isCheckedOptions,
        refundApplyOptions,

        mainQueryRaw: null,
        mainQuery: {
          mchNo: '',
          terNo: '',
          tradeNo: '',
          auditStatus: '',
          createTimeRange: null,
        },

        mainTable: {
          loading: false,
          options: {
            border: true,
            stripe: true,
            highlightCurrentRow: true,
            emptyText: '暂无数据',
            size: 'mini',
          },
          indexRow: null,
          allowSelect: false,
          columns: [
            {title: '订单号', key: 'tradeNo', align: 'center', width: '180', showOverflowTooltip: true, fixed: true},
            {title: '商户号', key: 'mchNo', align: 'center', showOverflowTooltip: true},
            {title: '终端号', key: 'terNo', align: 'center', showOverflowTooltip: true},
            {title: '勾兑状态', key: 'isChecked', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              var item = this.isCheckedOptions.find(item => item.value == val);
              return !!item ? item.label : "-";
            }},
            {title: '退款金额', key: 'amount', align: 'right', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              return (val / 100).toFixed(2);
            }},
            {title: '币种', key: 'mchTransCurrency', align: 'left', showOverflowTooltip: true},
            {title: '申请理由', key: 'reason', align: 'center', showOverflowTooltip: true},
            {title: '申请时间', key: 'createTime', align: 'center', width: "180", showOverflowTooltip: true},
            {title: '申请状态', key: 'auditStatus', align: 'center', showOverflowTooltip: true, formatter: (row, col, val, index) => {
              var item = this.refundApplyOptions.find(item => item.value == val);
              return !!item ? item.label : "-";
            }},
            {title: '驳回理由', key: 'auditRemark', align: 'center', showOverflowTooltip: true},
          ],
          rowHandle: {
            width: '240',
            align: 'center',
            fixed: 'right',
            custom: [
              {
                text: '驳回',
                type: 'default',
                size: 'mini',
                emit: 'handle-reject',
                disabled: (index, row) => {
                  return !(row.auditStatus == 1);
                },
              },
              {
                text: '创建退款单',
                type: 'default',
                size: 'mini',
                emit: 'handle-create',
                disabled: (index, row) => {
                  return !(row.isChecked == 2 && row.auditStatus == 1);
                },
              },
            ]
          },
          list: [],
          pagination: {
            currentPage: 1,
            pageSize: 50,
            total: 0,
            pageSizes: [50, 100, 200]
          },
          selectionRow: [],
        },
      }
    },
    computed: {},
    watch: {},
    mounted () {
      this.mainQueryRaw = Object.copy(this.mainQuery);
      this.resetMainData();
    },
    methods: {
      handleMainSizeChange (val) {
        this.mainTable.pagination.pageSize = val
        this.mainTable.pagination.currentPage = 1
        this.fetchMainData()
      },
      handleMainPageChange (val) {
        this.mainTable.pagination.currentPage = val
        this.fetchMainData()
      },
      resetMainData () {
        this.mainQuery = Object.copy(this.mainQueryRaw)
        this.handleSearch()
      },
      handleSearch () {
        this.mainTable.pagination.currentPage = 1
        this.fetchMainData()
      },

      buildMainQuery () {

        var query = {
          page: this.mainTable.pagination.currentPage,
          limit: this.mainTable.pagination.pageSize,
          search: Object.copy(this.mainQuery),
        }

        return query
      },

      renderMainData (re) {
        this.mainTable.list = re.list
        this.mainTable.pagination.total = re.total
      },

      async fetchMainData () {

        this.mainTable.loading = true

        try {
          var re = await ApiMain.list(this.buildMainQuery())
          this.renderMainData(re)
        } catch (err) {
        }

        this.mainTable.loading = false
      },

      handleReject ({index, row}) {
        this.$refs["dialog-reject"].show(row);
      },

      async handleCreate ({index, row}) {
        var req = {
          id: row.id,
        };

        this.mainTable.loading = true;

        try {
          await ApiMain.createRefundOrder(req);
          this.$message({message: '操作成功', type: 'success'});
        } catch (e) {}

        this.fetchMainData();
      },
    },

  }
</script>

<style scoped>

</style>
